<template>
<div class="home-wrap">
  <Submenu></Submenu>
  <div class="content">
    主要内容
  </div>
  <button @click="showToast" class="btn">打开 toast</button>
  <!-- to 属性就是目标位置 -->
  <teleport to="#teleport">
    <div v-if="visible" class="toast-wrap">
      <div class="toast-msg">我是一个 Toast 文案</div>
    </div>
  </teleport>

</div>
</template>

<script>
import {
  ref
} from 'vue'
import Submenu from './Submenu.vue'

export default {
  name: 'home',
  components: {
    Submenu
  },
  setup() {
    let visible = ref(false)
    const showToast = () => {
      visible.value = true
    }
    return {
      visible,
      showToast
    }
  }

}
</script>

<style lang="less" scoped>
.home-wrap {
  height: 100%;
  display: flex;
  justify-content: space-between;

  .content {
    flex-grow: 1;
  }
}
</style>
